<template>
  <view :data-theme="theme()" :class="theme() || ''">
    <view class="shop_data_title">
      <view class="icon-views icon iconfont icon-tongjibaobiao"></view>
      <view class="fb">{{$t('user.data_overview')}}</view>
    </view>

    <template v-if="!loadding">
      <view class="shop_data" style="margin-top: 0">
        <view class="group-title">{{$t('user.today_transaction_volume')}}</view>
        <view class="d-s-c deal-list">
          <view class="deal_item d-c d-c-c">
            <view class="item-num">{{ order.orderTotalPriceT }}</view>
            <view class="f26 gray9">{{$t('user.transaction_amount')}}</view>
          </view>
          <view class="deal_item d-c d-c-c">
            <view class="item-num">{{ order.orderPerPriceT }}</view>
            <view class="f26 gray9">{{$t('user.average_order_value')}}</view>
          </view>
          <view class="deal_item d-c d-c-c">
            <view class="item-num">{{ order.orderTotalT }}</view>
            <view class="f26 gray9">{{$t('user.paid_orders')}}</view>
          </view>
          <view class="deal_item d-c d-c-c">
            <view class="item-num">{{ order.orderUserTotalT }}</view>
            <view class="f26 gray9">{{$t('user.number_of_payers')}}</view>
          </view>
          <view class="deal_item d-c d-c-c">
            <view class="item-num">{{ order.orderRefundMoneyT }}</view>
            <view class="f26 gray9">{{$t('user.successful_refund_amount')}}</view>
          </view>
          <view class="deal_item d-c d-c-c">
            <view class="item-num">{{ order.orderRefundTotalT }}</view>
            <view class="f26 gray9">{{$t('user.refund_orders')}}</view>
          </view>
        </view>
      </view>
      <view class="shop_data">
        <view class="group-title">{{$t('user.today_visits')}}</view>
        <view class="visit">
          <view class="d-a-c visit_list">
            <view class="visit_item d-c d-c-c">
              <view class="item-num">{{ visit.favStoreT }}</view>
              <view class="f26 gray9">{{$t('user.merchant_favorites')}}</view>
            </view>
            <view class="visit_item d-c d-c-c">
              <view class="item-num">{{ visit.favProductT }}</view>
              <view class="f26 gray9">{{$t('user.product_favorites')}}</view>
            </view>
            <view class="visit_item d-c d-c-c">
              <view class="item-num">{{ visit.visitUserT }}</view>
              <view class="f26 gray9">{{$t('user.visitor_count')}}</view>
            </view>
            <view class="visit_item d-c d-c-c">
              <view class="item-num">{{ visit.visitTotalT }}</view>
              <view class="f26 gray9">{{$t('user.visit_count')}}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view class="shop_data_title">
      <view class="icon-views icon iconfont icon-dingdan2"></view>
      <view class="fb">{{$t('user.order_settlement')}}</view>
    </view>
    <view class="shop_data" style="margin-top: 0">
      <view
        v-for="(item, index) in orderList"
        :key="index"
        class="data-item"
        @click="todetail(item.settledId)"
      >
        <view class="d-b-c mb20">
          <view class="gray9" style="width: 400rpx"
            >{{$t('user.order_number')}}{{ item.orderNo }}</view
          >
          <text class="icon iconfont icon-jiantou1"></text>
        </view>
        <view class="d-b-c">
          <view class="gray9"
            >{{$t('user.payment_amount')}}<text class="gray3">{{ item.payMoney }}</text></view
          >
          <view class="gray9"
            >{{$t('user.settlement_amount')}}<text class="gray3">{{ item.supplierMoney }}</text></view
          >
        </view>
      </view>
      <!-- 没有记录 -->
      <view class="d-c-c p30" v-if="orderList.length == 0 && !loadding">
        <text class="iconfont icon-wushuju"></text>
        <text class="cont">{{$t('user.no_records')}}</text>
      </view>
      <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
    </view>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
  data() {
    return {
      order: {},
      visit: {},
      orderList: [],
      /*底部加载*/
      loadding: true,
      /*没有更多*/
      no_more: false,
      /*当前页面*/
      page: 1,
      last_page: 0,
    };
  },
  components: {
    uniLoadMore,
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loadding) {
        return 1;
      } else {
        if (this.orderList.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
  },
  onShow() {
     uni.setNavigationBarTitle({
      title: this.$t('user.merchant_data')
    })
  },
  mounted() {
    this.getData();
  },
  methods: {
    /*可滚动视图区域到底触发*/
    onReachBottom() {
      let self = this;
      if (self.no_more) {
        return;
      }
      self.page++;
      if (self.page <= self.last_page) {
        self.getData();
      } else {
        self.no_more = true;
      }
    },
    //获取数据列表
    getData(e) {
      let self = this;
      let page = self.page;
      self.loadding = true;
      uni.showLoading({
        title: this.$t('user.loading'),
      });
      self._postBody(
        "supplier/index/storedata",
        {
          pageIndex: page || 1,
        },
        (res) => {
          self.order = res.data.order;
          self.orderList = self.orderList.concat(res.data.ordersettle.records);
          self.visit = res.data.visit;
          self.last_page = res.data.ordersettle.lastPage;
          if (res.data.ordersettle.lastPage <= 1) {
            self.no_more = true;
          } else {
            self.no_more = false;
          }
          self.loadding = false;
          uni.hideLoading();
        }
      );
    },
    todetail(id) {
      this.gotoPage("/pages/user/my_shop/my_shop_detail?settled_id=" + id);
    },
  },
};
</script>

<style scoped lang="scss">
.shop_data {
  width: 710rpx;
  padding: 0 23rpx;
  background-color: white;
  margin: 0 auto;
  margin-top: 22rpx;
  box-sizing: border-box;
  border-radius: 25rpx;
  color: #585858;
}

.shop_data_title {
  height: 112rpx;
  padding: 0 23rpx;
  font-size: 30rpx;
  /* margin-bottom: 50rpx; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.group-title {
  height: 80rpx;
  line-height: 80rpx;
  color: #333;
  border-bottom: 1px solid #eee;
  font-size: 26rpx;
}

.visit {
  padding-top: 20rpx;
  padding-bottom: 30rpx;
}

.deal-list {
  flex-wrap: wrap;
  padding-bottom: 20rpx;
}

.deal_item {
  width: 33%;
  margin: 20rpx 0;
}

.item-num {
  margin-bottom: 10rpx;
  color: #333;
  font-size: 32rpx;
}

.datalist-name {
  /* text-align: center; */
}

.data-item {
  border-bottom: 1rpx solid #eee;
  padding: 26rpx 0rpx;
  font-size: 26rpx;
}

.icon-views {
  width: 58rpx;
  height: 58rpx;
  background: #ff5704;
  @include background_color("background_color");
  border-radius: 50%;
  margin-right: 12rpx;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-item .icon.iconfont {
  font-size: 24rpx;
  color: #999;
}
</style>
